<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
    <style>
        #map{
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%) ;
            border: 3px solid;
        }
        .snackBody{
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: black;
        }
        .food{
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script >
        //地图宽高，蛇身大小
        const WIDTH=20,HEIGHT=20,SIZE=20;

        //蛇身子用数组来存
        let snackArr=[];

        //食物坐标
        let foodX,foodY;

        //蛇头方向
        let direction=[1,0];
        let interval;
        window.onload=function(){
            let mapDom=document.getElementById('map');
            mapDom.style.width=WIDTH*SIZE+'px';
            mapDom.style.height=HEIGHT*SIZE+'px';
            init();
            interval=setInterval(game,200);
        }

        //键盘控制
        document.onkeydown=function(e){
            switch(e.keyCode){
                case 37 :if(direction[0]!=1){direction=[-1,0]}break;
                case 38 :if(direction[1]!=1){direction=[0,-1]}break;
                case 39 :if(direction[0]!=-1){direction=[1,0]}break;
                case 40 :if(direction[1]!=-1){direction=[0,1]}break;
                case 13 :init();
                interval=setInterval(game,200);break;
            }
        }

        function game(){
            check();//是否撞墙
            checkSelf()//是否撞自己
            if(isfood()){
                createFood();
                addBody();
            }
            let snackHtml='';
            for(let i=0;i<snackArr.length;i++){
                snackHtml += '<div class="snackBody" style="left:' + snackArr[i].x * SIZE + 'px; top:' + snackArr[i].y * SIZE + 'px;"></div>';

            } 
            snackHtml+='<div class="food" style="left:'+foodX*SIZE+'px;top:'+foodY*SIZE+'px;"></div>';
            document.getElementById('map').innerHTML=snackHtml;
            //snackArr.pop();
                move();
        }

        function init(){
            snackArr=[];
            snackArr[0]={x:5,y:4}
            snackArr[1]={x:4,y:4}
            snackArr[2]={x:3,y:4}
            createFood();
        }

        function createFood(){
            foodX=Math.floor(Math.random()*WIDTH);
            foodY=Math.floor(Math.random()*HEIGHT);
        }

        function move(){
            for(let i=snackArr.length-1;i>0;i--){
                snackArr[i].x=snackArr[i-1].x;
                snackArr[i].y=snackArr[i-1].y;
            }
            snackArr[0].x+=direction[0];
            snackArr[0].y+=direction[1];
        }

        function check(){
            let snackHeader=snackArr[0];
            if(snackHeader.x<0||snackHeader.y<0||snackHeader.x>=WIDTH||snackHeader.y>=HEIGHT){
                clearInterval(interval);
                alert('失败，游戏结束');
            }
        }

        function isfood(){
            let snackHeader=snackArr[0];
            if(snackHeader.x==foodX&&snackHeader.y==foodY){
                return true;
            }
            return false;
        }

        function addBody(){
            let lastBody=snackArr[snackArr.length-1];
            snackArr.push({
                x:lastBody.x,y:lastBody.y
            })

        }

        function checkSelf(){
            let snackHeader=snackArr[0];
            for(let i=1;i<snackArr.length;i++){
                if(snackArr[i].x==snackHeader.x&&snackArr[i].y==snackHeader.y){
                    alert('失败，游戏结束 你咬死了自己')
                    clearInterval(interval);
                }
            }

        }
    </script>
</body>
</html>